{{$this->Html->script(array(
        'medium-editor/medium-editor.min.js',
        //'medium-editor/medium-editor-insert-plugin.all.min.js',
        'medium-editor/addons/medium-editor-insert-plugin.js',
        'medium-editor/addons/medium-editor-insert-images.js',
        'medium-editor/addons/medium-editor-insert-embeds.js',
        //'medium-editor/addons/medium-editor-insert-maps.js',
    ));
}}
{{$this->Html->css(array(
        '/js/medium-editor/medium-editor.min.css',
        '/js/medium-editor/themes/default.min.css',
        '/js/medium-editor/medium-editor-insert-plugin.css',
    ));
}}
<style>
blockquote{margin:5px 0 5px 15px;}
#chapter-inline-content{min-height: 300px;padding:15px;}
#chapter-inline-content p {line-height: 1.5;font-size:20px;margin-bottom:10px;font-weight: 400;}
#chapter-inline-content h2,h3,h4{font-size:32px;margin:15px 0;font-weight: bold;}
#chapter-inline-content h4{font-size:28px;}
#chapter-inline-content .mediumInsert-buttonsShow{opacity: 1;-webkit-transform: inherit;
transform: inherit;
-moz-transition: inherit;border:0;
-o-transition: inherit;
-webkit-transition: inherit;
transition: inherit;}
#chapter-inline-content .mediumInsert {position: relative;margin:0px 0 -1em -40px;min-height: 18px;width:30px;}
#chapter-inline-content .fa,#chapter-inline-content .glyphicon{font-size:22px;}
.medium-editor-placeholder:after {padding-left: 15px;}
</style>

	<div id="cover-image" style="position:absolute;width:100%;background-color:#ccc;background-size: cover;height:350px;top:100px;left:0px;" class="cover-image"></div>
<div class="container">
	<div class="row" style="margin-top:120px;">
		<div class="col-md-10">
			<header>
				<i title="插入封面横幅图片" id="header-image" style="font-size:64px;" class="fa fa-picture-o"></i>
				<p id="header-image-placeholder" style="display:none;"></p>
				<h1 name="title" class="editable" id="chapter-name" contenteditable="true" data-placeholder="请输入标题" data-max-length="100"></h1>
			</header>
			<hr/>
			<blockquote  data-placeholder="请输入摘要" class="editable" id="chapter-summary" contenteditable="true"></blockquote>

			<div class="panel">
				<div  contenteditable="true" data-placeholder="请输入正文内容" class="editable" id="chapter-inline-content"></div>
			</div>
		</div>
		<div class="col-md-2">
			
			<div>
				<input type="button" id="save-draft" style="width:100%;margin:5px;" class="btn btn-primary" value="保存草稿"/>
				<input type="button" id="publish-chapter" style="width:100%;margin:5px;" class="btn btn-primary" value="发布"/>
			</div>
		</div>
	</div>
</div>
<script>
var editor = new MediumEditor('#chapter-inline-content');
editor.options.buttonLabels = 'fontawesome';
$('#chapter-inline-content').mediumInsert({
    editor: editor,
    buttonLabels:'fontawesome',
    addons: {
      images: {imagesUploadScript:BASEURL+'/upload_files/upload_inline',imagesDeleteScript:BASEURL+'/upload_files/delete_inline'},
      embeds: {}
    }
});
var imageAddon = $.fn.mediumInsert.getAddon('images');
function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

$(function(){
	var image_uploader = clone(imageAddon);
	
	$('#header-image').click(function(){
		var old_func = image_uploader.options.uploadFile;
		image_uploader.options.uploadFile = function ($placeholder, file, that) {
	        $.ajax({
	          type: "post",
	          url: BASEURL+'/upload_files/upload_inline?type=head',
	          xhr: function () {
	            var xhr = new XMLHttpRequest();
	            xhr.upload.onprogress = that.updateProgressBar;
	            return xhr;
	          },
	          cache: false,
	          contentType: false,
	          complete: function (jqxhr) {
	            if(jqxhr.responseText){
	            	$('.progress:first', $placeholder).remove();
	            	$('#cover-image').css('background-color','');
	            	$('#cover-image').css('background-image','url('+jqxhr.responseText+')');
	            }
	            image_uploader.options.uploadFile = old_func;
	          },
	          processData: false,
	          data: that.options.formatData(file)
	        });
    	},
		image_uploader.add($('#header-image-placeholder'));
	});


	$('#chapter-name,#chapter-summary,#chapter-inline-content').click(function(){
		if($(this).html() == $(this).data('placeholder')){
			$(this).html('').css('opacity',1);
		}
	});
	$('#chapter-name,#chapter-summary,#chapter-inline-content').blur(function(){
		if($(this).html() == '' || $(this).html() == '<br>'){
			$(this).html($(this).data('placeholder')).css('opacity',0.6);
		}
	});
	$('#chapter-name,#chapter-summary,#chapter-inline-content').trigger('blur');
})
</script>